/**
* 模版
**/ 

<template>
  <div class="addQ">
    <h3 style="text-align: center">添加阅读试题</h3>
    <el-form ref="form"
             :model="form"
             label-width="80px">
      <el-form-item label="题目文本">
        <el-input type="textarea"
                  v-model="form.text"
                  :autosize="{ minRows: 2, maxRows: 4}"></el-input>
      </el-form-item>
      <el-form-item label="选择题库">
        <el-select v-model="form.sub.subject"
                   placeholder="请选择科目"
                   @change="selectSub"
                   value-key="vkey">
          <el-option v-for="(itemo,i) in form.sub"
                     :value="itemo.subject"
                     :key="i"
                     :label="itemo.subject"></el-option>
        </el-select>
        <el-select v-model="form.grade.subject"
                   placeholder="请选择年级"
                   @change="selectDiff">
          <el-option v-for="(itemo,i) in form.grade"
                     :value="itemo.subject"
                     :key="i"
                     :label="itemo.subject"></el-option>
        </el-select>
        <el-select v-model="form.diff.subject"
                   placeholder="请选择难度"
                   @change="setInvenId">
          <el-option v-for="(itemo,i) in form.diff"
                     :value="itemo.subject"
                     :key="i"
                     :label="itemo.subject"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="题目状态">
        <el-switch v-model="form.status"></el-switch>
      </el-form-item>
      <el-form-item label="题目解析">
        <el-input type="textarea"
                  v-model="form.analysis"></el-input>
      </el-form-item>
    </el-form>
    <div v-for="(item,index) in readingQu"
         :key="index">
      <div class="formOuterBox">
        <div class="formCotantBox">
          <h3>阅读题信息 {{index+1}}</h3>
          <!-- 表单内容 -->
          <el-form label-width="80px">
            <el-form-item label="题目题干">
              <el-input v-model="item.topic"></el-input>
            </el-form-item>
            <el-form-item label="选项1">
              <el-input v-model="item.option1"></el-input>
              <el-checkbox v-model="item.op1Status">是否为答案</el-checkbox>
            </el-form-item>
            <el-form-item label="选项2">
              <el-input v-model="item.option2"></el-input>
              <el-checkbox v-model="item.op2Status">是否为答案</el-checkbox>
            </el-form-item>
            <el-form-item label="选项3">
              <el-input v-model="item.option3"></el-input>
              <el-checkbox v-model="item.op3Status">是否为答案</el-checkbox>
            </el-form-item>
            <el-form-item label="选项4">
              <el-input v-model="item.option4"></el-input>
              <el-checkbox v-model="item.op4Status">是否为答案</el-checkbox>
            </el-form-item>
          </el-form>
        </div>
        <!-- 操作按钮 -->
        <div>
          <el-button @click="addTopic"
                     type="success">添加题目</el-button>
          <el-button @click="addOption">添加选项</el-button>
          <el-button v-if="index!=0"
                     @click="removeTopicIdx(item, index)"
                     type="danger">删除此条题目</el-button>
          <el-button @click="submit"
                     type="primary"
                     plain>提交题目</el-button>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import { addOption, addQuestion } from '../../../api/questionMG'
import { findGrade, findSub } from '../../../api/questionMG'
// 导入组件
// import headerComponent from "./head.vue";
import { readingQuList } from '../../../api/readingQu.js'
import { findAllInfo } from '../../../api/readingQu.js'
import { addReadingQu } from '../../../api/readingQu.js'
// 导出模块
export default {
  // 模块名字
  name: 'danxuan',
  // 模块数据
  data() {
    //数据
    return {
      selecedGrade: [],
      form: {
        type: '5',
        sub: [
          {
            id: 0,
            subject: '',
            user: null,
            addtime: null,
            updatetime: null,
            fid: null,
            questionInventories: null,
          },
        ],
        grade: [
          {
            id: 0,
            subject: '',
            user: null,
            addtime: null,
            updatetime: null,
            fid: null,
            questionInventories: null,
          },
        ],
        diff: [
          {
            id: 0,
            subject: '',
            user: null,
            addtime: null,
            updatetime: null,
            fid: null,
            questionInventories: null,
          },
        ],
        text: '',
        status: false,
        analysis: '',
        InventoryId: 0,
      },
      readingQu: [
        {
          topic: '',
          option1: '',
          option2: '',
          option3: '',
          option4: '',
          op1Status: false,
          op2Status: false,
          op3Status: false,
          op4Status: false,
        },
      ],
    }
  },
  // 注册组件
  components: {
    // headerComponent
  },
  // 监听指定值，只有指定值变化，才会触发
  watch: {},
  // 里面的函数只有调用才会执行（实时计算）里面是定义的方法
  methods: {
    onSubmit() {},
    // 创建前状态(里面是操作)
    beforeCreate() {},
    // 创建完毕状态(里面是操作)
    created() {},
    // 挂载前状态(里面是操作)
    beforeMount() {},
    // 挂载结束状态(里面是操作)
    mounted() {},
    // 更新前状态(里面是操作)
    beforeUpdate() {},
    // 更新完成状态(里面是操作)
    updated() {},
    // 销毁前状态(里面是操作)
    beforeDestroy() {},
    // 销毁完成状态(里面是操作)
    destroyed() {},
    loadReadingQu() {
      readingQuList()
        .then((result) => {
          // console.log(result)
          this.options = result.data.data.options
          this.textR = result.data.data.text4
          this.topics = result.data.data.topics
        })
        .catch((err) => {})
    },
    addOption() {
      console.log('addOp')
    },
    addQu() {
      console.log('addQu')
      this.topics.push({
        id: 0,
        topic: '',
        questionType: null,
        questionInventory: null,
        questionText: {
          id: 0,
          dec: '',
        },
      })
      this.QuestionParam++
    },
    getPostData() {
      var postData = {
        InvenId: this.form.InventoryId,
        text: this.form.text,
        readingQu: this.readingQu,
      }
      return postData
    },
    submit() {
      // console.log(this.getPostData());
      addReadingQu(this.getPostData())
        .then((result) => {
          if (result.data.code == 200) {
            console.log(result.data.code)
            alert('添加成功')
          }
        })
        .catch((err) => {})
    },
    addTopic() {
      // 定义一个标识，通过标识判断是否能添加信息
      let statusType = true
      this.readingQu.forEach((item) => {
        if (item.topic == '') {
          this.$message({
            message: '请完善信息后在添加',
            type: 'warning',
          })
          statusType = false
        }
      })
      if (statusType) {
        this.readingQu.push({
          topic: '',
          option1: '',
          option2: '',
          option3: '',
          option4: '',
          op1Status: false,
          op2Status: false,
          op3Status: false,
          op4Status: false,
        })
      }
    },
    // 删除操作
    removeTopicIdx(item, index) {
      this.readingQu.splice(index, 1)
      this.$message({
        message: '删除成功',
        type: 'success',
      })
    },
    selectSub(val) {
      console.log(val)
      var arr = this.form.sub
      for (let index = 0; index < arr.length; index++) {
        if (val == arr[index].subject) {
          val = arr[index].id
        }
      }
      console.log(val)
      findAllInfo(val)
        .then((result) => {
          console.log(result)
          this.form.grade = result.data.data.sonSub
        })
        .catch((err) => {})
      this.form.InventoryId = val
      console.log('subject', this.form.InventoryId)
    },

    selectDiff(val) {
      console.log(val)
      var arr = this.form.grade
      for (let index = 0; index < arr.length; index++) {
        if (val == arr[index].subject) {
          val = arr[index].id
        }
      }
      console.log(val)
      findAllInfo(val)
        .then((result) => {
          console.log(result)
          this.form.diff = result.data.data.sonSub
        })
        .catch((err) => {})
      this.form.InventoryId = val
      console.log('grade', this.form.InventoryId)
    },
    setInvenId(val) {
      var arr = this.form.diff
      for (let index = 0; index < arr.length; index++) {
        if (val == arr[index].subject) {
          val = arr[index].id
        }
      }
      this.form.InventoryId = val
      console.log('diff', this.form.InventoryId)
    },
  },

  created() {
    let num = -1
    findAllInfo(num)
      .then((result) => {
        console.log(result)
        this.form.sub = result.data.data.fatherSub
      })
      .catch((err) => {})
  },
}
</script>
// scoped 样式只在本组件使用
<style scoped>
.addFormBox {
  margin: 20px;
}
.formOuterBox {
  margin-bottom: 20px;
  padding: 30px 40px;
  background: white;
  border-radius: 30px;
}
h3 {
  margin: 0px 0px 20px 0px;
}
</style>
